<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>分类</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第二步：引入css-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" >
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <!--第三步：引入js-->
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<div id="wrapper">
    <header>
        <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html"><img class="back" src="images/icon_back_n.png"></a>
        <div class="title"> <span style="text-align: center;line-height: .84rem;" class="title">商品分类</span></div>
        <span class="icon_search"><img src="images/search.png"></span>

    </header>
    <div class="wrap0">
    <h3 class="list_title"  style="padding-top: .5rem">手机/平板/电话卡</h3>
    <div id="m0">
        <div class="floor chanpin_list"></div>
        <ul>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img style="text-align: center;vertical-align: middle" src="images/class_list01.png" alt=""/></div>
                    <div class="name"> <p>小米5</p></div>

                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list02.png" alt=""/></div>
                    <div class="name"><p>小米4s</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list03.png" alt=""/></div>
                    <div class="name"><p>小米Note</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list04.png" alt=""/></div>
                    <div class="name"><p>小米4c</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list05.png" alt=""/></div>
                    <div class="name"><p>小米4</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list06.png" alt=""/></div>
                    <div class="name"><p>红米3</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list07.png" alt=""/></div>
                    <div class="name"><p>红米Note3</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list08.png" alt=""/></div>
                    <div class="name"><p>小米平板2</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list09.png" alt=""/></div>
                    <div class="name"><p>电信手机</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list10.png" alt=""/></div>
                    <div class="name"><p>官翻机</p></div>
                </li>
            </a>
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                <li>
                    <div class="img"><img src="images/class_list11.png" alt=""/></div>
                    <div class="name"><p>小米移动</p></div>
                </li>
            </a>
            <div style="clear: both;"></div>

        </ul>



    </div>
</div>

    <div class="wrap1">
        <h3 class="list_title" style="padding-top: .5rem">电视/盒子</h3>
        <div id="m1">
            <div class="floor chanpin_list"></div>
            <ul>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img style="text-align: center;vertical-align: middle" src="images/class_list01.png" alt=""/></div>
                        <div class="name"> <p>小米5</p></div>

                    </li>
                </a>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img src="images/class_list02.png" alt=""/></div>
                        <div class="name"><p>小米4s</p></div>
                    </li>
                </a>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img src="images/class_list03.png" alt=""/></div>
                        <div class="name"><p>小米Note</p></div>
                    </li>
                </a>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img src="images/class_list04.png" alt=""/></div>
                        <div class="name"><p>小米4c</p></div>
                    </li>
                </a>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img src="images/class_list05.png" alt=""/></div>
                        <div class="name"><p>小米4</p></div>
                    </li>
                </a>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img src="images/class_list06.png" alt=""/></div>
                        <div class="name"><p>红米3</p></div>
                    </li>
                </a>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img src="images/class_list07.png" alt=""/></div>
                        <div class="name"><p>红米Note3</p></div>
                    </li>
                </a>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img src="images/class_list08.png" alt=""/></div>
                        <div class="name"><p>小米平板2</p></div>
                    </li>
                </a>
                <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <li>
                        <div class="img"><img src="images/class_list09.png" alt=""/></div>
                        <div class="name"><p>电信手机</p></div>
                    </li>
                </a>
                <a href="">
                    <li>
                        <div class="img"><img src="images/class_list10.png" alt=""/></div>
                        <div class="name"><p>官翻机</p></div>
                    </li>
                </a>
                <a href="">
                    <li>
                        <div class="img"><img src="images/class_list11.png" alt=""/></div>
                        <div class="name"><p>小米移动</p></div>
                    </li>
                </a>
                <div style="clear: both;"></div>

            </ul>


        </div>
    </div>

    <div class="wrap2">
        <h3 class="list_title"  style="padding-top: .5rem">智能硬件/路由器</h3>
        <div id="m2">
            <div class="floor chanpin_list"></div>
            <ul>
                <li>
                    <div class="img"><img style="text-align: center;vertical-align: middle" src="images/class_list01.png" alt=""/></div>
                    <div class="name"> <p>小米5</p></div>

                </li>
                <li>
                    <div class="img"><img src="images/class_list02.png" alt=""/></div>
                    <div class="name"><p>小米4s</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list03.png" alt=""/></div>
                    <div class="name"><p>小米Note</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list04.png" alt=""/></div>
                    <div class="name"><p>小米4c</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list05.png" alt=""/></div>
                    <div class="name"><p>小米4</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list06.png" alt=""/></div>
                    <div class="name"><p>红米3</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list07.png" alt=""/></div>
                    <div class="name"><p>红米Note3</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list08.png" alt=""/></div>
                    <div class="name"><p>小米平板2</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list09.png" alt=""/></div>
                    <div class="name"><p>电信手机</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list10.png" alt=""/></div>
                    <div class="name"><p>官翻机</p></div>
                </li>
                <li>
                    <div class="img"><img src="images/class_list11.png" alt=""/></div>
                    <div class="name"><p>小米移动</p></div>
                </li>
                <div style="clear: both;"></div>

            </ul>







        </div>
    </div>
</div>

</body>
<footer>
    <!--商城-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">商城</p>

        </section>

    </a>
    <!--分类-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%88%86%E7%B1%BB.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">分类</p>

        </section>

    </a>
    <!--购物车-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E8%B4%AD%E7%89%A9%E8%BD%A6.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">购物车</p>

        </section>

    </a>
    <!--服务-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">服务</p>

        </section>

    </a>
</footer>
</html>
<script>
    $(function()
    {
        function fullwidth()
        {
            if($('body').width() >= 720)
            {
                $('html').css('font-size',100 + 'px');
                return;
            }
            var scale = $('body').width() / 720;
            $('html').css('font-size',scale * 100 + 'px');
        }
        fullwidth();
        $(window).resize(function()
        {
            fullwidth();
        })
    });
</script>